<template>
<div class="title">
  <router-view />
  <div class="title_font">
    <span class="name">花大旗</span>
    <span class="back_to_home" >返回首页</span>
    <span class="title_call_us">联系我们</span>
    <span class="image"></span>
    <span class="title_user" style="margin-left: 5%">{{this.username}}</span>
  </div>

</div>
</template>

<script>
export default {
  name: "Title",
  data(){
    return{
      username:"user",
    }
  }
}
</script>

<style scoped>
.title{

  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0px 24px 0px 64px;

  position: absolute;
  width: 100%;
  height: 64px;
  left: 0px;
  top: 0px;

  background: #262F3E;
}
.title_font{
  margin-top: 16px;
}
.name{
  position: static;
  width: 63px;
  height: 29px;
  left: 0px;
  top: 0px;

  font-family: Noto Sans;
  font-style: normal;
  font-weight: 900;
  font-size: 21px;
  line-height: 29px;
  color: rgba(170, 207, 255, 1);

  flex: none;
  order: 0;
  flex-grow: 0;
  margin: 0px 0px
}
.back_to_home{
  /* 返回首页 */
  position: static;
  width: 56px;
  height: 22px;
  left: 0px;
  top: 0px;

  /* Body/regular */

  font-family: PingFang SC;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 22px;
  /* identical to box height, or 157% */
  /* tag字 */

  color: #98A3B7;
  /* Inside auto layout */

  flex: none;
  order: 0;
  flex-grow: 0;
  margin-left: 6%;
}
.title_call_us{
  /* 联系我们 */


  position: static;
  width: 56px;
  height: 22px;
  left: 0px;
  top: 0px;

  /* Body/regular */

  font-family: PingFang SC;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 22px;
  /* identical to box height, or 157% */


  color: #FFFFFF;


  /* Inside auto layout */

  flex: none;
  order: 0;
  flex-grow: 0;
  margin-left: 65%;
}
.title_user{
  /* text */
  float: right;

  position: static;
  width: 98px;
  height: 22px;
  left: 0px;
  top: 0px;

  /* Body/regular */

  font-family: PingFang SC;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 22px;
  /* identical to box height, or 157% */

  color: #FFFFFF;
  /* Inside auto layout */

  flex: none;
  order: 0;
  flex-grow: 0;
  margin-right: 3%;
  margin-top: 5px;
}

</style>